<template>
	<view class="integral-lottery">
		<view class="current-integral-box">
			<view class="current-integral-text">
				<text class="title">当前积分</text>
				<text class="integral-num">{{userIntegral}}</text>
			</view>

			<view class="gift-box" @click.stop="goRecord">
				<text class="title">我的礼品</text>
				<van-icon class="arrow-icon" name="arrow" />
			</view>
		</view>

		<view class="lottery-box">
			<view class="lottery-list">
				<view class="lottery-item" :class="{'rotate': item.isOpen}" @click.stop="openCurrentGift(index)"
					v-for="(item, index) in giftList" :key="index">
					<view class="pros">
						<text v-if="!item.isOpen">抽</text>
						<text v-else></text>
					</view>
					<view class="cons"
						:class="{'active': (item.isActive && item.type != 2), 'thanks-active': (item.isActive && item.type == 2), 'thanks-bg': (!item.isActive && item.type == 2)}">
						<!-- <view class="gift-value" v-if="item.giftType == 'cash'">￥{{item.giftValue}}</view>
						<view class="gift-value" v-else-if="item.giftType == 'integral'">{{item.giftValue}}</view> -->
						<view class="gift-img" v-if="item.type != 2">
							<image class="image" :src="'https://biapi.vaubang.cn' + item.cover" mode="aspectFit">
							</image>
						</view>
						<!-- <view class="gift-img thanks-img" v-else>
							<image class="image" src="../../static/sign/lottery-thanks.png" mode="aspectFit">
							</image>
						</view> -->

						<view class="gift-title" v-show="item.type != 2">{{item.name}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="integral-tips">点击翻牌可抽奖,抽奖后点击下方按钮重置翻牌</view>

		<view class="lottery-btn" @click="resetIntegralLottery">
			<text class="integral-text">99积分抽一次</text>
		</view>
		

		<!-- 活动规则 -->
		<view class="activity-rules" @click.stop="isActivityShow = true">活动规则</view>

		<view class="activity-box" v-show="isActivityShow">
			<view class="activity-mask"></view>
			<view class="activity-bg">
				<view class="activity-title">活动规则</view>
				<view class="activity-content">
					<view class="content-text">1.每次抽奖消耗99积分，每日抽奖次数不限</view>
					<view class="content-text">2.抽奖记录请在【我的礼品】中进行点击查看</view>
					<view class="content-text">3.抽奖获得的实物奖品后台会在7天内进行处理并邮寄，具体到货时间以物流为准</view>
					<view class="content-text">4.本活动最终解释权归长沙沃邦所有</view>
					<view class="content-text">5.联系客服(点击号码可直接拨打电话)<view class="phone" @click.stop="callPhone('18975157865')">
							客服1号：18975157865</view>
						<view class="phone" @click.stop="callPhone('13874983748')">
							客服2号：13874983748
						</view>
					</view>
				</view>
				<view class="activity-btn" @click.stop="isActivityShow = false">知道了</view>
			</view>
		</view>

		<!-- 抽中实物礼品弹窗 -->
		<view class="lottery-gift-box" v-if="isGiftBoxShow">
			<view class="gift-mask"></view>

			<view class="gift-bg">
				<view class="gift-title">恭喜您抽中</view>
				<view class="gift-image">
					<image class="image" :src="'https://biapi.vaubang.cn' + currentGiftData.cover" mode="aspectFit">
					</image>
				</view>
				<view class="gift-name">{{item.name}}</view>
				<view class="gift-btns">
					<view class="cancel-btn" :class="{'gray': isCountTimeShow}" @click.stop="cancelGiftBox">
						<text class="cancel-text">取消</text>
						<text class="count-time" v-show="isCountTimeShow">({{countTime}})</text>
					</view>
					<view class="submit-btn" @click.stop="goWriteAddress">填写收货地址</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import apiRqs from '@/api/api-request.js';
	export default {
		data() {
			return {
				resetClick: false,
				giftList: [{}, {}, {}, {}, {}, {}, {}, {}, {}],
				isActivityShow: false,
				userIntegral: 0,
				timeOutState: false,
				isGiftBoxShow: false,
				currentGiftData: {},
				countTime: 5,
				isCountTimeShow: true,
			}
		},
		onLoad() {
			this.getUserIntegral();

		},
		methods: {
			// 获取个人积分
			getUserIntegral() {
				apiRqs._getUserIntegral().then((res) => {
					console.log('个人积分', res);
					if (res.code == 200) {
						this.userIntegral = res.data;
					} else {
						getApp().showToast(res.msg);
					}
				})
			},
			// 拨打电话
			callPhone(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				})
			},
			openCurrentGift(index) {
				// 防止重复点击
				if (!this.resetClick) {
					getApp().showLoading();
					apiRqs._handleIntegralLottery({
						"choose": index + 1
					}).then((res) => {
						uni.hideLoading();
						console.log('抽奖结果', res);
						if (res.code == 200) {
							this.userIntegral = this.userIntegral - 99;
							let newData = JSON.parse(JSON.stringify(res.data));

							for (let i = 0; i < newData.length; i++) {
								newData[i].isOpen = false;
							}
							newData[index].isActive = true;
							for (let i = 0; i < newData.length; i++) {
								newData[i].isOpen = true;
							}
							this.giftList = newData;
							// 当抽取的奖品为积分时，计算积分扣除和增加情况
							if (newData[index].type == 1) {
								let integralNum = newData[index].name.split("积分")[1];
								this.userIntegral = this.userIntegral + (integralNum * 1);
							} else if (newData[index].type == 3) {
								this.currentGiftData = newData[index];
								setTimeout(() => {
									let countDown = setInterval(() => {
										if (this.countTime > 0) {
											this.countTime--;
										} else {
											this.isCountTimeShow = false;
										}
									}, 1000)
									this.isGiftBoxShow = true;
								}, 1500)

							}
							this.resetClick = true;
						} else {
							getApp().showToast(res.msg);
						}
					})
				}
			},

			resetIntegralLottery() {
				console.log('重置...');
				if (this.resetClick) {
					let giftList = this.giftList;
					for (let i = 0; i < giftList.length; i++) {
						giftList[i].isOpen = false;
					}
					this.giftList = giftList;
					this.resetClick = false;
				}
			},
			goRecord() {
				uni.navigateTo({
					url: "/packageA/workbench/sign-exchange"
				})
			},
			goWriteAddress() {
				uni.setStorageSync("giftItem", this.currentGiftData);
				uni.navigateTo({
					url: "/packageA/workbench/add-address"
				})
				this.isGiftBoxShow = false;
			},
			cancelGiftBox() {
				if (this.countTime <= 0) {
					this.isGiftBoxShow = false;
				}
			},
		},
	}
</script>

<style lang="less">
	.integral-lottery {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background: linear-gradient(180deg, #FF8402 0%, #FE4300 100%);
		overflow-y: auto;

		.lottery-gift-box {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 40;

			.gift-mask {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background-color: rgba(0, 0, 0, 0.5);
				z-index: 50;
			}

			.gift-bg {
				position: absolute;
				width: 280px;
				background-color: #fff;
				border-radius: 10px;
				top: 50%;
				margin-top: -50%;
				left: 50%;
				margin-left: -140px;
				padding: 20px 20px 0 20px;
				box-sizing: border-box;
				z-index: 60;

				.gift-title {
					font-size: 16px;
					color: #333;
					width: 100%;
					text-align: center;
					font-weight: 500;
				}

				.gift-image {
					width: 80px;
					height: 80px;
					margin: 40px auto 0px;

					.image {
						width: 100%;
						height: 100%;
					}
				}

				.gift-name {
					font-size: 14px;
					color: #000;
					width: 100%;
					text-align: center;
					margin-top: 12px;
					font-weight: 600;
				}

				.gift-btns {
					height: 50px;
					line-height: 5px;
					margin-top: 30px;
					display: flex;
					align-items: center;

					.cancel-btn {
						width: 50%;
						text-align: center;
						font-size: 15px;
						color: #777;
						letter-spacing: 4px;

						&.gray {
							color: #ccc;
						}
					}

					.submit-btn {
						width: 50%;
						text-align: center;
						font-size: 15px;
						color: #008aff;
					}
				}
			}
		}

		.activity-rules {
			position: absolute;
			top: 88px;
			right: 0;
			padding: 8px 3px;
			border-top-left-radius: 6px;
			border-bottom-left-radius: 6px;
			font-size: 12px;
			color: #fff;
			background: #E1460E;
			writing-mode: tb-rl;
			letter-spacing: 2px;
		}

		.activity-box {
			position: fixed;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			z-index: 10;

			.activity-mask {
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				background-color: rgba(0, 0, 0, 0.5);
				z-index: 12;
			}

			.activity-bg {
				z-index: 13;
				width: 270px;
				height: 374px;
				border-radius: 20px;
				position: absolute;
				top: 50%;
				left: 50%;
				margin-top: -187px;
				margin-left: -135px;
				background-image: url("../../static/sign/activity-bg.png");
				background-repeat: no-repeat;
				background-size: 100%;
				padding: 15px 20px;
				box-sizing: border-box;

				.activity-title {
					font-size: 20px;
					color: #fff;
					font-weight: 500;
					width: 100%;
					text-align: center;
				}

				.activity-content {
					font-size: 13px;
					color: #fff;

					.content-text {
						margin-top: 10px;

						.phone {
							margin-top: 5px;
						}
					}
				}

				.activity-btn {
					width: 154px;
					text-align: center;
					height: 35px;
					line-height: 35px;
					background: linear-gradient(180deg, #F6FCC9 0%, #FF7021 100%);
					box-shadow: inset 0px 4px 13px 0px rgba(255, 255, 255, 0.76);
					border-radius: 40px;
					font-size: 16px;
					color: #fff;
					position: absolute;
					bottom: 20px;
					left: 50%;
					margin-left: -77px;
					font-weight: 500;
				}
			}
		}

		.current-integral-box {

			background: rgba(255, 255, 255, 0.1);
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0px 20px;
			height: 56px;
			line-height: 56px;
			display: flex;
			align-items: center;
			box-sizing: border-box;

			.current-integral-text {
				display: flex;
				align-items: center;

				.title {
					font-size: 14px;
					color: #fff;
				}

				.integral-num {
					font-size: 30px;
					color: #fff;
					margin-left: 5px;
					font-weight: 500;
					margin-top: -3px;
				}
			}

			.gift-box {
				display: flex;
				align-items: center;

				.title {
					font-size: 14px;
					color: #fff;
				}

				.arrow-icon {
					font-size: 14px;
					color: #fff;
					margin-left: 5px;
				}
			}

		}

		.lottery-box {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 70px;

			.lottery-list {
				width: 306px;
				display: flex;
				flex-wrap: wrap;

				.lottery-item {
					width: 94px;
					height: 130px;
					border-radius: 10px;
					margin-left: 12px;
					margin-bottom: 10px;
					position: relative;
					// transition: transform 1s ease;
					// /*过渡*/
					// transform-style: preserve-3d;

					/*让转换的子元素保留3D转换*/
					&:nth-child(3n+1) {
						margin-left: 0;
					}



					.pros {
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						background-image: url("../../static/sign/lottery-item-bg.png");
						background-repeat: no-repeat;
						background-size: 100%;
						background-position: center center;
						display: flex;
						align-items: center;
						justify-content: center;
						transform: rotateY(0deg);
						font-size: 30px;
						color: #fff;
						font-weight: 500;
						z-index: 2;
						border-radius: 10px;
						transition: transform 1s ease;
						backface-visibility: hidden;
						// animation: scaleEffect 4s ease-in-out infinite;
						// animation-direction: alternate;
					}

					.cons {
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						background-image: url("../../static/sign/lottery-open.png");
						background-repeat: no-repeat;
						background-size: 100%;
						background-position: center center;
						transform: rotateY(180deg);
						z-index: 1;
						border-radius: 10px;
						display: flex;
						flex-direction: column;
						align-items: center;
						transition: transform 1s ease;
						backface-visibility: hidden;

						.gift-img {
							width: 46px;
							height: 46px;
							position: absolute;
							top: 50%;
							margin-top: -30px;

							&.thanks-img {
								width: 66px;
								height: 66px;
								margin-top: -40px;
							}

							.image {
								width: 100%;
								height: 100%;
							}
						}

						.gift-value {
							color: #FEDD47;
							font-size: 20px;
							position: absolute;
							font-weight: 500;
							top: 50%;
							margin-top: -28%;
						}

						.gift-title {
							font-size: 13px;
							color: #fff;
							position: absolute;
							bottom: 15px;
							font-weight: 500;
						}
					}

					&.rotate {

						.pros {
							// animation: missing 2s linear;
							// animation-direction: unset;
							transform: rotateY(-180deg);
						}

						.cons {
							transform: rotateY(0deg);

							&.active {
								background-image: url("../../static/sign/lottery-open-selected.png");
							}

							&.thanks-active {
								background-image: url("../../static/sign/lottery-thanks-selected.png");
							}

							&.thanks-bg {
								background-image: url("../../static/sign/lottery-thanks.png");
							}
						}
					}
				}
			}
		}

		.lottery-btn {
			width: 250px;
			height: 50px;
			text-align: center;

			background-image: url("../../static/sign/lottery-btn.png");
			background-repeat: no-repeat;
			background-size: 100%;
			// box-shadow: inset 0px 4px 14px 0px #ffffff;
			border-radius: 100px;
			// border: 2px solid #FF6000;
			color: #fff;
			font-weight: 500;
			margin: 50px auto 0px;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.integral-text {
				font-size: 18px;
			}
		}

		.integral-tips {
			width: 100%;
			text-align: center;
			font-size: 12px;
			margin-top: 10px;
			color: rgba(255, 255, 255, 0.5);
			font-weight: 500;
		}

		.height {
			height: 50px;
		}

	}

	@keyframes scaleEffect {
		0% {
			transform: scale(1);
			/*开始为原始大小*/
		}

		25% {
			transform: scale(1.02);
			/*放大1.1倍*/
		}

		50% {
			transform: scale(1);
		}

		75% {
			transform: scale(1.02);
		}
	}

	@keyframes missing {
		0% {
			opacity: 1;
		}

		100% {
			opacity: 0;
		}
	}
</style>
